<template>
  <!-- 卡片 -->
  <el-card class="greeting-card">
    <div class="greeting-content">
      <el-avatar :size="60" :src="userStore.avatar"/>
      <div class="greeting-text">
        <h2>{{ greeting }}，{{ userStore.nickName }}！</h2>
        <p class="sub-text">今天是 {{ currentDate }}，系统运行状态正常</p>
      </div>
    </div>
  </el-card>
  <!-- 快捷访问 -->
  <p class="title-name">快捷访问</p>
  <el-card style="width: 100%;margin-bottom: 20px;" shadow="always">
    <div style="margin-left:30px;display: flex;align-items: center;justify-content: flex-start;">

      <div class="card-con">
        <el-image
            class="apply"
            :src="applyImageSrc"
            fit="scale-down"
            @mouseover="onMouseOverApply"
            @mouseleave="onMouseLeaveApply"
            @click="apply"
        />
        <span style="font-size: 15px;">健康体检申报</span>
      </div>
      <div class="card-con">
        <el-image
            class="reserve"
            :src="reserveImageSrc"
            fit="scale-down"
            @mouseover="onMouseOverReserve"
            @mouseleave="onMouseLeaveReserve"
            @click="reserve"
        />
        <span style="font-size: 15px;">健康体检预约</span>
      </div>
      <div class="card-con">
        <el-image
            class="mine"
            :src="mineImageSrc"
            fit="scale-down"
            @mouseover="onMouseOverMine"
            @mouseleave="onMouseLeaveMine"
            @click="mine"
        />
        <span style="font-size: 15px;">个人中心</span>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.home {
  font-size: 16px;
  overflow-x: hidden;

  .greeting-card {
    margin-bottom: 20px;

    .greeting-content {
      display: flex;
      align-items: center;
      padding: 20px;

      .greeting-text {
        margin-left: 20px;

        h2 {
          margin: 0;
          font-size: 24px;
          color: #1ab394;
        }

        .sub-text {
          margin: 8px 0 0;
          color: #0884ac;
          font-size: 14px;
        }
      }
    }
  }

  .data-cards {
    margin-bottom: 15px;

    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-left {
        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        .card-label {
          color: #909399;
          font-size: 14px;
        }
      }

      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .notice-card {
    margin-top: 20px;

    :deep(.el-timeline) {
      padding-left: 10px;
    }

    .el-tag {
      margin-bottom: 8px;
    }
  }
}

.welcome {
  font-size: 20px;
  display: flex;
  align-items: center;

  .hello {
    font-weight: bold;
    background: linear-gradient(to right, #288dbb, #11a01a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .name {
    font-size: 14px;
    font-weight: bold;
    color: #1ab394;
    margin-left: 5px;
  }
}

.title-name {
  margin-left: 10px;
  font-size: 14px;
  background-color: #409eff;
  color: #FFFFFF;
  height: 30px;
  line-height: 30px;
  width: 80px;
  text-align: center;
}

.apply, .reserve, .mine :hover {
  cursor: pointer;
}

.apply {
  width: 80px;
  height: 80px;
  transition: filter 0.3s ease;
}

.reserve {
  width: 80px;
  height: 80px;
  transition: filter 0.3s ease;
}

.mine {
  width: 80px;
  height: 80px;
  transition: filter 0.3s ease;
}

.card-con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 50px;
}
</style>


<script setup lang="js">
defineOptions({
  name: 'Welcome'

})
import {computed, ref} from "vue";
import useUserStore from "../../../store/modules/user.js";
import router from '@/router'
// 导入图片
import applyDefault from '@/assets/images/apply.png';
import applyHover from '@/assets/images/applyHover.png';
import reserveDefault from '@/assets/images/reserve.png';
import reserveHover from '@/assets/images/reserveHover.png';
import mineDefault from '@/assets/images/mine.png';
import mineHover from '@/assets/images/mineHover.png';

const userStore = useUserStore()
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})
// 动态问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  return '晚上好'
})

const applyImageSrc = ref(applyDefault)
const reserveImageSrc = ref(reserveDefault)
const mineImageSrc = ref(mineDefault)

// 申报图片转换
const onMouseOverApply = () => {
  applyImageSrc.value = applyHover
}
const onMouseLeaveApply = () => {
  applyImageSrc.value = applyDefault
}

// 预约图片转换
const onMouseOverReserve = () => {
  reserveImageSrc.value = reserveHover
}
const onMouseLeaveReserve = () => {
  reserveImageSrc.value = reserveDefault
}

// 个人中心图片转换
const onMouseOverMine = () => {
  mineImageSrc.value = mineHover
}
const onMouseLeaveMine = () => {
  mineImageSrc.value = mineDefault
}

const apply = () => {
  router.push('/employee/apply')
}
const reserve = () => {
  router.push('/employee/reserve')
}
const mine = () => {
  router.push('/employee/mine')
}
</script>